<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>覆盖层</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: 'Microsoft yahei';
			font-size: 12px;
		}

		#conver {
			position: absolute;
			display: none;
			opacity: .4;
			background: #fff;
			left: 0;
			top: 0;
		}
	</style>
	<script>
		window.onload = function() {
			var html = [];
			html.push("<ul>");
			for (var  i = 0; i < 40; i++) {
				html.push("<li>index " + i + "</li>");
			}
			html.push("</ul>");

			document.getElementById("container").innerHTML = html.join("");

			var converObj = document.getElementById("conver");
			converObj.style.width = "100%";
			converObj.style.height = "500px";
			converObj.style.display = "block";
		}
	</script>
</head>
<body>
	<div id="conver"></div>
	<div id="container"></div>
</body>
</html>